<template>
	<div>
		<!-- 搜索框 -->
		<search></search>
		<!-- 轮播图 -->
		<swiper indicator-color="true" indicator-dots="true" interval="3000" autoplay="true">
			<swiper-item v-for="(item,index) in swiperData" :key="item.goods_id">
				<navigator :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id">
					<image :src="item.image_src" class="banner"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 导航栏 -->
		<view class="yg-top" v-show="showBackToTop" @click="goTop">
			顶部
		</view>
		<view class="yg-navs">
			<navigator url="/pages/category/category" open-type="switchTab" v-for="(item,index) in navs"
				:key="item.image_src" class="yg-navs-item">
				<image :src="item.image_src" class="imagepice"></image>
			</navigator>
		</view>
		<!-- 楼层 -->
		<view class="yg-pics">
			<view class="yg-pics-item" v-for="(item,index) in floorData" :key="index">
				<!-- 图片标题的开始 -->
				<view class="pics-item-title">
					<image :src="item.floor_title.image_src"></image>
				</view>
				<!-- 图片标题的结束 -->
				<!-- 图片列表开始 -->
				<view class="pics-item-list">
					<navigator :url="v.navigator_url" class="item-list-i" v-for="(v,i) in item.product_list"
						:key="v.image_src">
						<image :src="v.image_src"></image>
					</navigator>
				</view>

			</view>
		</view>

	</div>
</template>
<script>
	import search from '../../components/Search.vue'
	export default {	
		data() {

			return {
				swiperData: [],
				navs: {},
				floorData: [],
				showBackToTop: true
			};
		},
		components: {
			search
		},
		// 获取鼠标滚动	
		onPageScroll: function(e) {
			const windowHegiht = uni.getSystemInfoSync().windowHeight / 2
			if (e.scrollTop >	 windowHegiht) {
				this.showBackToTop = true
			}else{
				this.showBackToTop = false
			}
		},
		async created() {

			const res = await this.$request({
				url: 'home/swiperdata'
			})
			this.swiperData = res.message
			const a = await this.$request({
				url: 'home/catitems'
			})
			this.navs = a.message
			const res1 = await this.$request({
				url: 'home/floordata'
			})
			res1.message.map(v => {
				v.product_list.map(vv => {
					vv.navigator_url = "/pages/goods_list/goods_list?" + vv.navigator_url.split("?")[
						1];
				})
			})
			this.floorData = res1.message
			console.log(this.floorData)

		},
	methods:{
		goTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			})
		}
	}
	}
</script>
<style lang="less" scoped>
	.yg-top {
		position: fixed;
		background-color: #eb4450;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		line-height: 80rpx;
		text-align: center;
		color: white;
		bottom: 10rpx;
		right: 10rpx;
	}

	.banner {

		width: 750rpx;
		height: 340rpx;
	}

	.yg-navs {
		display: flex;

	}

	.yg-navs-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		.imagepice {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.yg-pics {

		.yg-pics-item {
			.pics-item-title {
				image {
					height: 60rpx;
				}
			}

			.pics-item-list {
				overflow: hidden;
				margin-bottom: 20rpx;

				navigator {
					float: left;

					image {
						width: 100%;
						height: 100%;
					}

					&:nth-child(1) {
						margin-left: 16rpx;
						height: 386rpx;
						width: 232rpx;
					}

					&:nth-child(3),
					&:nth-child(2) {
						margin-bottom: 10rpx;
					}

					&:nth-child(2),
					&:nth-child(4) {
						margin-left: 15rpx;
						height: 188rpx;
						width: 233rpx;
					}

					&:nth-child(3),
					&:nth-child(5) {
						margin-left: 15rpx;
						height: 188rpx;
						width: 223rpx;
					}
				}
			}

		}
	}
</style>
